<template>
  <canvas class="hidden md:block" ref="canvas"></canvas>
</template>

<script setup>
import * as PIXI from 'pixi.js'
import { Live2DModel } from 'pixi-live2d-display'
import { ref, onMounted, onUnmounted } from 'vue'

window.PIXI = PIXI
const canvas = ref(null)
let app
let model

onMounted(async () => {
  app = new PIXI.Application({
    backgroundAlpha: 0,
    view: canvas.value,
    width: 200,
    height: 220,
    autoDensity: true,
    antialias: true,
    resolution: window.devicePixelRatio,
  })
  // model = await Live2DModel.from('src/assets/live2d/model/Miss Bai/Miss Bai.model3.json')
  // 打包用
  model = await Live2DModel.from("assets/live2d/model/Miss Bai/Miss Bai.model3.json")
  app.stage.addChild(model)
  model.scale.set(0.1)
  model.position.set(0, 0)
  model.on("hit", (hitAreas) => {
    console.log(hitAreas)
    if (hitAreas.includes("dress")) {
      model.motion("weapon", true)
    }
  })
})

onUnmounted(() => {
  app.destroy()
})

</script>

<style scoped></style>